<template>
  <view>
    <u-popup :show="showPopup" @close="closePopup" @open="openPopup" mode="bottom">
      <view class="popup-content">
        <!-- 地址列表 -->
        <view class="list" v-if="addressList.length > 0">
          <view class="item acea-row row-between-wrapper" :class="{ 'font-color': active === index }" v-for="(item, index) in addressList" :key="index" @tap="tapAddress(index, item.id)">
            <u-icon name="map-fill" class="iconfont" :class="{ 'font-color': active === index }" />
            <view class="address">
              <view class="name" :class="{ 'font-color': active === index }">
                {{ item.realName }}<text class="phone">{{ item.phone }}</text>
              </view>
              <view class="line1">{{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }} </view>
            </view>
            <u-icon v-if="active === index" name="checkmark" class="iconfont" :class="{ 'font-color': active === index }" />
          </view>
        </view>

        <view class="pictrue" v-else>
          <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/06/16/noAddress_20250616094046A166.png"> </image>
        </view>

        <view class="addressBnt bg-color" @click="goAddressPages">添加收货地址</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getAddressList } from "../../../utils/api/user";

export default {
  props: {
    pagesUrl: {
      type: String,
      default: "",
    },
    address: {
      type: Object,
      default: () => ({
        address: true,
        addressId: 0,
      }),
    },
    isLog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showPopup: false,
      active: 0,
      addressList: [],
      defaultAddress: "",
    };
  },

  methods: {
    openPopup() {
      this.showPopup = true;
    //   this.getAddressLists();
    },
    closePopup() {
      this.showPopup = false;
    },
    tapAddress(index, addressId) {
      this.active = index;
      const selectedAddress = this.addressList.find((item) => item.id === addressId);
      this.$emit("OnChangeAddress", selectedAddress);
      this.closePopup();
    },
    goAddressPages() {
      this.closePopup();
      uni.navigateTo({
        url: "/pages_h5/myCenter/components/user_addressAdd",
      });
    },
    getAddressLists() {
      getAddressList({ page: 1, limit: 5 }).then((res) => {
        this.addressList = res.data.list;
        for (let i = 0, leng = res.data.list.length; i < leng; i++) {
          if (this.addressList[i].isDefault == true) {
            this.active = i;
            this.defaultAddress = this.addressList[i];
          }
        }
        this.$emit("OnDefaultAddress", this.defaultAddress);
      });
    },
  },
  mounted() {
    this.getAddressLists();
  },
  activated() {
    this.getAddressLists();
  },
};
</script>

<style scoped lang="scss">
.popup-content {
  background-color: #fff;
  padding: 20rpx;
}

.list .item {
  margin: 20rpx 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 20rpx;
}

.list .item .iconfont {
  font-size: 35rpx;
  color: #2c2c2c;
}

.list .item .address {
  flex: 1;
  margin-left: 20rpx;
}

.list .item .name {
  font-size: 28rpx;
  font-weight: bold;
  color: #282828;
}

.list .item .name .phone {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #999;
}

.list .item .line1 {
  font-size: 24rpx;
  color: #666;
  margin-top: 6rpx;
}

.addressBnt {
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
  width: 100%;
  height: 80rpx;
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  background-color: #00aaff;
  margin-top: 40rpx;
}

.pictrue {
  width: 100%;
  height: 200rpx;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pictrue image {
  width: 40%;
  height: 96%;
}

.font-color {
  color: red;
}
</style>
